<template>
  <div class="video-edit">
    <div class="before" v-show="beforeShow">
      <div class="title">上传视频</div>
      <el-upload
        class=""
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
        :before-upload="beforUploadCheck"
        :on-progress="onProgress"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
      >
        <img
          src="../../../assets/images/icons/icon_cover_add.png"
          alt="添加"
          class="video-inner__logo"
        />
        <div class="el-upload__text">
          将文件拖到此处，或<em style="color:#0050ff">点击上传</em>
        </div>
        <div class="el-upload__tip">
          上传说明：目前支持mp4、avi格式，单个视频大小需在500MB以内
        </div>
      </el-upload>
    </div>
    <div class="after" v-show="!beforeShow">
      <div class="video-progress-info">
        <div class="title">上传视频</div>
        <div class="long-block">
          <div class="long-block__text">
            {{ videoName }}
          </div>
          <div class="long-block__loading" v-show="isLoading">
            <Loading :loading="true" />
          </div>
        </div>
        <el-progress
          class="progress"
          :stroke-width="8"
          :percentage="percentage"
          :show-text="false"
          :text-inside="true"
        >
        </el-progress>
      </div>
      <div class="video-description">
        <div class="video-info">
          <div class="title-other">视频描述</div>
          <div class="textarea-box">
            <textarea
              class="textarea"
              :class="{ 'warn-textarea': videoDescLength > 100 }"
              v-model="videoDesc"
              maxlength="101"
            >
            </textarea>
            <span
              class="textarea__word-limit"
              :class="{ 'warn-word': videoDescLength > 100 }"
              >{{ videoDescLength }} /100</span
            >
          </div>
        </div>
        <div class="video-cover">
          <div class="title-other">视频封面</div>
          <el-upload
            class=""
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            :auto-upload="false"
            :on-change="picOnChange"
          >
            <img
              src="../../../assets/images/icons/icon_cover_add.png"
              alt="添加"
              class="video-inner__logo"
            />
            <div class="el-upload__text">
              将文件拖到此处，或<em style="color:#0050ff">点击上传</em>
            </div>
            <div class="el-upload__tip">
              格式：png/jpg/jpeg/bmp/gif<br />
              尺寸：1080*600(16:9)最佳
            </div>
          </el-upload>
        </div>

        <!-- vueCropper 剪裁图片实现-->
        <el-dialog
          title="图片剪裁"
          :visible.sync="dialogVisible"
          append-to-body
        >
          <div class="cropper-content">
            <div class="cropper" style="text-align:center">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :centerBox="option.centerBox"
                :infoTrue="option.infoTrue"
                :fixedBox="option.fixedBox"
              ></vueCropper>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="finish" :loading="loading"
              >确认</el-button
            >
          </div>
        </el-dialog>
      </div>
      <div class="video-topic">
        <RoyoleCascader v-for="(topic, index) in topicList" :key="index">
          <template v-slot:title>
            <div class="title">
              {{ topic.title }}
            </div>
          </template>
        </RoyoleCascader>
      </div>
      <div class="bottom">
        <div class="button--grey">在线预览</div>
        <div class="button--highlight">发布</div>
      </div>
    </div>
  </div>
</template>

<script>
import Loading from '../../../components/Loading'
import RoyoleCascader from '../../../components/RoyoleCascader'
export default {
  methods: {
    beforUploadCheck(file) {
      if (file.type != 'video/mp4' && file.type != 'video/avi') {
        return false
      } else {
        this.beforeShow = false
        this.videoName = file.name
      }
    },
    onProgress(event) {
      this.percentage = event.percent
    },
    handleUploadSuccess(response) {
      console.log(response)
      this.isLoading = false
    },
    handleUploadError() {
      this.isLoading = false
    },

    // 上传按钮   限制图片大小
    picOnChange(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      this.fileinfo = file

      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.option.img = file.url
        this.dialogVisible = true
      })
    },
    // 点击裁剪，这一步是可以拿到处理后的地址
    finish() {
      this.$refs.cropper.getCropBlob((data) => {
        var fileName = 'goods' + this.fileinfo.uid
        this.loading = true
        //上传阿里云服务器
        client()
          .put(fileName, data)
          .then((result) => {
            this.dialogVisible = false
            this.picsList.push(result.url)
          })
          .catch((err) => {
            console.log(err)
            this.loading = false
          })
      })
    },
  },
  data() {
    return {
      beforeShow: true,
      videoName: 'oooppp',
      isLoading: true,
      videoDesc: '',
      percentage: 0,

      // 剪裁数据
      dialogVisible: false,
      // 裁剪组件的基础配置option
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      picsList: [], //页面显示的数组
      // 防止重复提交
      loading: false,
      dialogVisible: false,
      topicList: [
        {
          title: '选择话题',
          placeholder: '请搜索或选择话题',
          options: [
            {
              value: 'zhinan',
              label: '指南',
              children: [
                {
                  value: 'shejiyuanze',
                  label: '设计原则',
                  children: [
                    {
                      value: 'yizhi',
                      label: '一致',
                    },
                    {
                      value: 'fankui',
                      label: '反馈',
                    },
                    {
                      value: 'xiaolv',
                      label: '效率',
                    },
                    {
                      value: 'kekong',
                      label: '可控',
                    },
                  ],
                },
                {
                  value: 'daohang',
                  label: '导航',
                  children: [
                    {
                      value: 'cexiangdaohang',
                      label: '侧向导航',
                    },
                    {
                      value: 'dingbudaohang',
                      label: '顶部导航',
                    },
                  ],
                },
              ],
            },
            {
              value: 'zujian',
              label: '组件',
              children: [
                {
                  value: 'basic',
                  label: 'Basic',
                  children: [
                    {
                      value: 'layout',
                      label: 'Layout 布局',
                    },
                    {
                      value: 'color',
                      label: 'Color 色彩',
                    },
                    {
                      value: 'typography',
                      label: 'Typography 字体',
                    },
                    {
                      value: 'icon',
                      label: 'Icon 图标',
                    },
                    {
                      value: 'button',
                      label: 'Button 按钮',
                    },
                  ],
                },
                {
                  value: 'form',
                  label: 'Form',
                  children: [
                    {
                      value: 'radio',
                      label: 'Radio 单选框',
                    },
                    {
                      value: 'checkbox',
                      label: 'Checkbox 多选框',
                    },
                    {
                      value: 'input',
                      label: 'Input 输入框',
                    },
                    {
                      value: 'input-number',
                      label: 'InputNumber 计数器',
                    },
                    {
                      value: 'select',
                      label: 'Select 选择器',
                    },
                    {
                      value: 'cascader',
                      label: 'Cascader 级联选择器',
                    },
                    {
                      value: 'switch',
                      label: 'Switch 开关',
                    },
                    {
                      value: 'slider',
                      label: 'Slider 滑块',
                    },
                    {
                      value: 'time-picker',
                      label: 'TimePicker 时间选择器',
                    },
                    {
                      value: 'date-picker',
                      label: 'DatePicker 日期选择器',
                    },
                    {
                      value: 'datetime-picker',
                      label: 'DateTimePicker 日期时间选择器',
                    },
                    {
                      value: 'upload',
                      label: 'Upload 上传',
                    },
                    {
                      value: 'rate',
                      label: 'Rate 评分',
                    },
                    {
                      value: 'form',
                      label: 'Form 表单',
                    },
                  ],
                },
                {
                  value: 'data',
                  label: 'Data',
                  children: [
                    {
                      value: 'table',
                      label: 'Table 表格',
                    },
                    {
                      value: 'tag',
                      label: 'Tag 标签',
                    },
                    {
                      value: 'progress',
                      label: 'Progress 进度条',
                    },
                    {
                      value: 'tree',
                      label: 'Tree 树形控件',
                    },
                    {
                      value: 'pagination',
                      label: 'Pagination 分页',
                    },
                    {
                      value: 'badge',
                      label: 'Badge 标记',
                    },
                  ],
                },
                {
                  value: 'notice',
                  label: 'Notice',
                  children: [
                    {
                      value: 'alert',
                      label: 'Alert 警告',
                    },
                    {
                      value: 'loading',
                      label: 'Loading 加载',
                    },
                    {
                      value: 'message',
                      label: 'Message 消息提示',
                    },
                    {
                      value: 'message-box',
                      label: 'MessageBox 弹框',
                    },
                    {
                      value: 'notification',
                      label: 'Notification 通知',
                    },
                  ],
                },
                {
                  value: 'navigation',
                  label: 'Navigation',
                  children: [
                    {
                      value: 'menu',
                      label: 'NavMenu 导航菜单',
                    },
                    {
                      value: 'tabs',
                      label: 'Tabs 标签页',
                    },
                    {
                      value: 'breadcrumb',
                      label: 'Breadcrumb 面包屑',
                    },
                    {
                      value: 'dropdown',
                      label: 'Dropdown 下拉菜单',
                    },
                    {
                      value: 'steps',
                      label: 'Steps 步骤条',
                    },
                  ],
                },
                {
                  value: 'others',
                  label: 'Others',
                  children: [
                    {
                      value: 'dialog',
                      label: 'Dialog 对话框',
                    },
                    {
                      value: 'tooltip',
                      label: 'Tooltip 文字提示',
                    },
                    {
                      value: 'popover',
                      label: 'Popover 弹出框',
                    },
                    {
                      value: 'card',
                      label: 'Card 卡片',
                    },
                    {
                      value: 'carousel',
                      label: 'Carousel 走马灯',
                    },
                    {
                      value: 'collapse',
                      label: 'Collapse 折叠面板',
                    },
                  ],
                },
              ],
            },
            {
              value: 'ziyuan',
              label: '资源',
              children: [
                {
                  value: 'axure',
                  label: 'Axure Components',
                },
                {
                  value: 'sketch',
                  label: 'Sketch Templates',
                },
                {
                  value: 'jiaohu',
                  label: '组件交互文档',
                },
              ],
            },
          ],
        },
        {
          title: '选择圈子',
          placeholder: '请搜索或选择圈子',
          options: [
            {
              value: 'zhinan',
              label: '指南',
              children: [
                {
                  value: 'shejiyuanze',
                  label: '设计原则',
                  children: [
                    {
                      value: 'yizhi',
                      label: '一致',
                    },
                    {
                      value: 'fankui',
                      label: '反馈',
                    },
                    {
                      value: 'xiaolv',
                      label: '效率',
                    },
                    {
                      value: 'kekong',
                      label: '可控',
                    },
                  ],
                },
                {
                  value: 'daohang',
                  label: '导航',
                  children: [
                    {
                      value: 'cexiangdaohang',
                      label: '侧向导航',
                    },
                    {
                      value: 'dingbudaohang',
                      label: '顶部导航',
                    },
                  ],
                },
              ],
            },
            {
              value: 'zujian',
              label: '组件',
              children: [
                {
                  value: 'basic',
                  label: 'Basic',
                  children: [
                    {
                      value: 'layout',
                      label: 'Layout 布局',
                    },
                    {
                      value: 'color',
                      label: 'Color 色彩',
                    },
                    {
                      value: 'typography',
                      label: 'Typography 字体',
                    },
                    {
                      value: 'icon',
                      label: 'Icon 图标',
                    },
                    {
                      value: 'button',
                      label: 'Button 按钮',
                    },
                  ],
                },
                {
                  value: 'form',
                  label: 'Form',
                  children: [
                    {
                      value: 'radio',
                      label: 'Radio 单选框',
                    },
                    {
                      value: 'checkbox',
                      label: 'Checkbox 多选框',
                    },
                    {
                      value: 'input',
                      label: 'Input 输入框',
                    },
                    {
                      value: 'input-number',
                      label: 'InputNumber 计数器',
                    },
                    {
                      value: 'select',
                      label: 'Select 选择器',
                    },
                    {
                      value: 'cascader',
                      label: 'Cascader 级联选择器',
                    },
                    {
                      value: 'switch',
                      label: 'Switch 开关',
                    },
                    {
                      value: 'slider',
                      label: 'Slider 滑块',
                    },
                    {
                      value: 'time-picker',
                      label: 'TimePicker 时间选择器',
                    },
                    {
                      value: 'date-picker',
                      label: 'DatePicker 日期选择器',
                    },
                    {
                      value: 'datetime-picker',
                      label: 'DateTimePicker 日期时间选择器',
                    },
                    {
                      value: 'upload',
                      label: 'Upload 上传',
                    },
                    {
                      value: 'rate',
                      label: 'Rate 评分',
                    },
                    {
                      value: 'form',
                      label: 'Form 表单',
                    },
                  ],
                },
                {
                  value: 'data',
                  label: 'Data',
                  children: [
                    {
                      value: 'table',
                      label: 'Table 表格',
                    },
                    {
                      value: 'tag',
                      label: 'Tag 标签',
                    },
                    {
                      value: 'progress',
                      label: 'Progress 进度条',
                    },
                    {
                      value: 'tree',
                      label: 'Tree 树形控件',
                    },
                    {
                      value: 'pagination',
                      label: 'Pagination 分页',
                    },
                    {
                      value: 'badge',
                      label: 'Badge 标记',
                    },
                  ],
                },
                {
                  value: 'notice',
                  label: 'Notice',
                  children: [
                    {
                      value: 'alert',
                      label: 'Alert 警告',
                    },
                    {
                      value: 'loading',
                      label: 'Loading 加载',
                    },
                    {
                      value: 'message',
                      label: 'Message 消息提示',
                    },
                    {
                      value: 'message-box',
                      label: 'MessageBox 弹框',
                    },
                    {
                      value: 'notification',
                      label: 'Notification 通知',
                    },
                  ],
                },
                {
                  value: 'navigation',
                  label: 'Navigation',
                  children: [
                    {
                      value: 'menu',
                      label: 'NavMenu 导航菜单',
                    },
                    {
                      value: 'tabs',
                      label: 'Tabs 标签页',
                    },
                    {
                      value: 'breadcrumb',
                      label: 'Breadcrumb 面包屑',
                    },
                    {
                      value: 'dropdown',
                      label: 'Dropdown 下拉菜单',
                    },
                    {
                      value: 'steps',
                      label: 'Steps 步骤条',
                    },
                  ],
                },
                {
                  value: 'others',
                  label: 'Others',
                  children: [
                    {
                      value: 'dialog',
                      label: 'Dialog 对话框',
                    },
                    {
                      value: 'tooltip',
                      label: 'Tooltip 文字提示',
                    },
                    {
                      value: 'popover',
                      label: 'Popover 弹出框',
                    },
                    {
                      value: 'card',
                      label: 'Card 卡片',
                    },
                    {
                      value: 'carousel',
                      label: 'Carousel 走马灯',
                    },
                    {
                      value: 'collapse',
                      label: 'Collapse 折叠面板',
                    },
                  ],
                },
              ],
            },
            {
              value: 'ziyuan',
              label: '资源',
              children: [
                {
                  value: 'axure',
                  label: 'Axure Components',
                },
                {
                  value: 'sketch',
                  label: 'Sketch Templates',
                },
                {
                  value: 'jiaohu',
                  label: '组件交互文档',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  components: {
    Loading,
    RoyoleCascader,
  },
  computed: {
    videoDescLength() {
      return this.videoDesc.length
    },
  },
}
</script>

<style lang="scss">
.video-edit {
  padding: 0 32px;
  .title {
    @include title(32px, 16px);
  }
  .title-other {
    @include title(48px, 16px);
  }
}
// 截图
.cropper-content {
  .cropper {
    width: auto;
    height: 300px;
  }
}

.video-inner__logo {
  width: 40px;
  height: 40px;
}

.long-block {
  width: 100%;
  height: 52px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba($color: #000000, $alpha: 0.03);
  &__text {
    font-size: 14px;
    font-weight: 400;
  }
}
.progress {
  margin-top: 4px;
}
.video-description {
  display: flex;
  .video-info {
    .textarea-box {
      position: relative;
      display: inline-block;
      .textarea {
        padding: 10px;
        height: 180px;
        width: 488px;
        border: none;
        border-radius: 8px;
        background: rgba($color: #000000, $alpha: 0.03);
      }
      .textarea :focus {
        outline: none;
        border: 2px solid $color-royole;
      }
      .textarea__word-limit {
        position: absolute;
        bottom: 10px;
        right: 8px;
        opacity: 0.4;
        font-family: Gotham-Medium;
        font-size: 12px;
        color: #000000;
        font-weight: 500;
      }
    }
  }
  .video-cover {
    margin-left: 24px;
  }
}
.bottom {
  margin-top: 100px;
  height: 64px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: solid 1px rgba(#000000, 0.1);
  .button--highlight {
    margin-right: 24px;
    @include button($color-royole, #ffffff);
  }
  .button--grey {
    margin-right: 24px;
    @include button(rgba(#000000, 0.05), rgba(#00000000, 0.6));
  }
}

.el-upload__text {
  padding: 8px 0;
}
.warn-word {
  opacity: 1 !important;
  color: red !important;
}
.warn-textarea:focus {
  outline: none;
  border: red 2px solid !important;
}
.el-upload__tip {
  padding: 0;
  margin: 0;
  line-height: 17px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.4;
}
</style>
